<template>
	<view class="shopCardOuter">
		<view class="shopCardNull" v-if="shopCard.length === 0">
			<image src="../../static/images/gwck.png" mode=""></image>
			<view>
				购物车快饿瘪了 T.T
			</view>
			<view>
				快给我挑点宝贝吧
			</view>
			<button class="hangout" @click="hangingOut">去逛逛</button>
		</view>

		<view class="shopCard" v-else>
			<view class="shopCard_top">
				<view class="shopCard_top_l">
					<image src="../../static/images/iconImg/gwcsd.png" mode=""></image>
					<text>jshop商城系统</text>
				</view>
				<view class="shopCard_top_r" v-if="isEdit === false" @click="isEdit = !isEdit">
					编辑
				</view>
				<view class="shopCard_top_r" v-if="isEdit" @click="isEdit = !isEdit">
					完成
				</view>
			</view>

			<!-- 商品列表 -->
			<ul class="shopCardItem">
				<li v-for="(item,index) in shopCard" :key="index">
					<!-- {{item}} -->
					<checkbox-group class="radioGroup">
						<label>
							<radio :checked="item.checked" @click="radioChange(index,item)" />
							<view class="shopCardItem" @click.stop="">
								<image :src="item.list.products.image_path" mode=""></image>
								<view class="shopCardItem_c">
									<view class="shopCardItem_c_l">
										<view>{{item.list.products.name}}</view>
										<view>颜色:红色,规格:规格1</view>
									</view>

									<view class="shopCardItem_c_r">
										<view>
											￥{{item.list.products.price}}
										</view>
										<view v-if="isEdit === false">
											<span @click="jian(item.list,index)">-</span>
											<span>{{item.list.nums}}</span>
											<span @click="jia(item.list,index)">+</span>
										</view>
										<view v-if="isEdit">
											<image class="delIcon" @click="delBtn(item)" src="../../static/images/iconImg/del.png" mode="">
											</image>
										</view>
									</view>

								</view>
							</view>
						</label>
					</checkbox-group>
				</li>
			</ul>
		</view>

		<!-- 底部功能区 -->
		<view class="footer">
			<radio-group class="radioGroup">
				<label>
					<radio value="all" :checked="allChecked" @click="allcheck" /><text>全选</text>
				</label>
			</radio-group>

			<view class="hj" v-if="isEdit ===false">
				合计：<span>￥{{sum}}</span>
			</view>
			<view class="settlement" v-if="isEdit ===false" @click="gotoPay">
				去结算
			</view>
			<view class="settlement" v-if="isEdit === true" @click="delArr">
				删除
			</view>

		</view>


	</view>
</template>

<script>
	import {
		getShopCartApi
	} from '../../api/paiModule/home.js'
	export default {
		data() {
			return {
				shopCard: [],
				checked: '',
				allChecked: false,
				sum: '0.00',
				radioData: [],
				idArr: [],
				isEdit: false // 是否为编辑状态
			};
		},
		onShow() {
			this.getShopCart()
			this.selectStatus()
		},

		methods: {
			hangingOut() {
				uni.switchTab({
					url: '../home/home',
				})
			},

			// 判断选择状态
			selectStatus() {
				if (this.shopCard.length === 0) {
					this.allChecked = false
					console.log(456);
				} else {
					console.log(123);
					const res = this.shopCard.every((item) => item.checked === true);
					if (res === true) {
						this.allChecked = true
					} else {
						this.allChecked = false
					}
				}

			},

			// 获取购物车列表
			async getShopCart() {
				const {
					data: res
				} = await getShopCartApi({
					display: "all",
					ids: "",
					method: "cart.getlist",
					token: uni.getStorageSync('token')
				})
				this.shopCard = []
				res.data.list.forEach((item, index) => {
					this.shopCard.push({
						checked: false,
						list: item
					})
				})
			},

			// 单选框状态
			async radioChange(index, data) {
				this.shopCard[index].checked = !this.shopCard[index].checked
				/* const res = this.shopCard.every((item) => item.checked === true);
				if (res === true) {
					this.allChecked = true
				} else {
					this.allChecked = false
				} */
				this.selectStatus()

				if (data.checked) {
					this.idArr.push(data.list.id)
				} else {
					this.idArr.forEach((item, index) => {
						if (data.list.id === item) {
							this.idArr.splice(index, 1)
						}
					})
				}

				const {
					data: shopRes
				} = await getShopCartApi({
					display: "all",
					ids: this.idArr.join(','),
					method: "cart.getlist",
					token: uni.getStorageSync('token')
				})

				this.sum = shopRes.data.amount


			},

			// 全选框
			async allcheck() {
				this.allChecked = !this.allChecked
				this.shopCard.forEach((item) => {
					item.checked = this.allChecked
				})


				if (this.allChecked) {
					this.shopCard.forEach(item => {
						this.idArr.push(item.list.id)
					})
					const {
						data: shopRes
					} = await getShopCartApi({
						display: "all",
						ids: this.idArr.join(','),
						method: "cart.getlist",
						token: uni.getStorageSync('token')
					})

					this.sum = shopRes.data.amount
				} else {
					const {
						data: shopRes
					} = await getShopCartApi({
						display: "all",
						ids: '',
						method: "cart.getlist",
						token: uni.getStorageSync('token')
					})

					this.sum = shopRes.data.amount
					this.idArr = []
				}


			},

			async jia(data, index) {
				this.allChecked = false
				this.sum = 0
				const {
					data: res
				} = await getShopCartApi({
					id: "" + data.id,
					method: "cart.setnums",
					nums: data.nums + 1,
					token: uni.getStorageSync('token')
				})

				this.getShopCart()

			},

			async jian(data, num) {

				if (data.nums <= 1) {
					uni.showToast({
						title: '数量已到最低',
						icon: 'none', //将值设置为 success 或者 ''
						duration: 2000 //持续时间为 2秒
					})
				} else {
					this.allChecked = false
					this.sum = 0
					const {
						data: res
					} = await getShopCartApi({
						id: "" + data.id,
						method: "cart.setnums",
						nums: data.nums - 1,
						token: uni.getStorageSync('token')
					})

					this.getShopCart()

				}

			},

			// 删除一个
			async delBtn(data) {
				console.log(data);
				const obj = {
					ids: "" + data.list.id,
					method: "cart.del",
					token: uni.getStorageSync('token'),
				}

				const {
					data: res
				} = await getShopCartApi(obj)

				this.getShopCart()

			},

			// 删除多个
			async delArr() {
				console.log('删除');
				const {
					data: res
				} = await getShopCartApi({
					ids: this.idArr.join(','),
					method: "cart.del",
					token: uni.getStorageSync('token')
				})

				this.getShopCart()
				this.allcheck()

			},

			// 去结算
			async gotoPay() {
				if (this.idArr.length === 0) {
					uni.showToast({
						icon: 'none',
						title: '请至少选择一件商品!',
						duration: 1000
					})
				} else {
					uni.navigateTo({
						url: `/pages/purchase/purchase?ids=${this.idArr.join(',')}&num=${this.idArr.length}`
					})
					this.shopCard = []
				}
			},
		}
	}
</script>

<style lang="scss">
	.shopCardOuter {
		height: 85.9vh;
		background-color: #f8f8f8;
		position: relative;

		.shopCardNull {
			position: absolute;
			top: 40%;
			left: 50%;
			transform: translate(-50%, -50%);
			text-align: center;
			font-size: 14px;
			color: #626262;

			image {
				width: 160px;
				height: 160px;
			}

			button {
				width: 80px;
				height: 40px;
				line-height: 40px;
				font-size: 13px;
				margin-top: 20px;
				background-color: #e3e3e3;
				border: none;
				outline: none;
			}
		}

		.shopCard {
			width: 100%;
			background-color: #fff;
			overflow-y: hidden;

			.shopCard_top {
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 10px 20px;
				font-size: 12px;
				border-bottom: 1px solid #e3e3e3;
				margin-bottom: 10px;

				.shopCard_top_l {
					display: flex;
					align-items: center;

					image {
						width: 16px;
						height: 16px;
						margin-right: 10px;
					}
				}
			}

			.shopCardItem {
				overflow-y: scroll;
			}

			li {
				display: flex;
				align-items: center;

				.radioGroup {
					label {
						display: flex;
						align-items: center;
						padding: 10px 0 10px 10px;

						.checkbox {
							-webkit-appearance: radio;
							border-radius: 50%;
						}

						.shopCardItem {
							display: flex;
							align-items: center;
							margin-left: 10px;

							image {
								width: 70px;
								height: 80px;
								margin-right: 10px;
							}

							.shopCardItem_c {
								width: 70%;
								height: 80px;
								display: flex;

								.shopCardItem_c_l {
									width: 64%;
									font-size: 12px;

									&>view {
										&:first-child {
											font-size: 14px;
											overflow-wrap: anywhere;
											text-overflow: -o-ellipsis-lastline;
											overflow: hidden;
											text-overflow: ellipsis;
											display: -webkit-box;
											-webkit-line-clamp: 2;
											line-clamp: 2;
											-webkit-box-orient: vertical;
											margin-bottom: 6px;
										}

										&:last-child {
											font-size: 12px;
											color: #8a8a8a;
										}
									}
								}

								.shopCardItem_c_r {
									width: 30%;
									margin-left: 10px;
									text-align: center;
									font-size: 12px;

									.delIcon {
										width: 16px;
										height: 16px;
										margin-left: 20px;
									}

									&>view {
										&:first-child {
											font-size: 14px;
											color: #ff0000;
											margin-bottom: 20px;
										}

										&:last-child {
											width: 100%;
											padding: 0 10px;
											display: flex;
											justify-content: space-between;
											align-items: center;

											span {
												&:nth-child(2) {
													font-size: 14px;
												}
											}
										}
									}
								}

							}
						}
					}
				}
			}
		}

		.footer {
			height: 40px;
			position: absolute;
			bottom: 0;
			left: 0;
			right: 0;
			display: flex;
			align-items: center;
			background-color: #fff;
			// padding: 6px 0 6px 10px;
			padding-left: 10px;
			font-size: 15px;

			.radioGroup {
				margin-right: 32%;

				label {
					display: flex;
					align-items: center;
				}
			}

			.hj {
				font-size: 12px;

				span {
					color: red;
					font-size: 14px;
				}
			}

			.settlement {
				height: 100%;
				background-color: #333;
				color: #fff;
				font-size: 14px;
				padding: 0 17px;
				position: absolute;
				right: 0;
				line-height: 40px;
			}

		}

	}
</style>